<!DOCTYPE html>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/wapstyle.css">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
          name="viewport" id="viewport">
    <title>学员信息登录</title>
    <script src="<%=basePath%>js/jquery.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        var wxConfig = false;
        var obj = new Object();
        obj.url = window.location.href;
        function wxJsSdkInit() {
            $.post("<%=basePath%>wechat/sdkInit", obj, function (data) {
                wx.config({
                    appId: data.appid,
                    timestamp: data.timestamp,
                    nonceStr: data.nonceStr,
                    signature: data.signature,
                    jsApiList: ['chooseImage', 'uploadImage']
                });
                wx.ready(function () {
                    wxConfig = true;
                });
            });
        }
       // wxJsSdkInit();
       // var picture = new Array();
   /*     function chooseImage(d) {
            wx.chooseImage({
                count: 1,
                sizeType: ["original", "compressed"],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    var localId = res.localIds[0];
                    if (d == 'a') {
                        var showPicture = document.querySelector("#show-picture");
                        showPicture.src = localId;
                        picture[0] = localId;
                    } else {
                        var showPicture2 = document.querySelector("#show-picture2");
                        showPicture2.src = localId;
                        picture[1] = localId;
                    }
                }
            });
        }*/

        function subimt() {
            /**
             * 校验学员信息合法性
             */
           /* if (picture[0] == null) {
                //A面身份证未上传
                showDialog("请上传身份证正面!");
                return false
            }
            if (picture[1] == null) {
                //B面身份证未上传
                showDialog("请上传身份证背面!");
                return false;
            }*/
            var idname = $("#idname").val();
            //alert("请输入您的姓名!" + idname + (idname.length));
            if (idname.length == 0) {
                showDialog("请输入您的姓名!" + idname);
                return false;
            }
            if (!$("input[name='sex']").is(':checked')) {
                showDialog("请选择性别");
                return false;
            }
            var phone = $("#phone").val();
            var re = /^1\d{10}$/;
            if (phone.length == 0) {
                showDialog("联系电话不能为空");
                return false;
            }
            if (!re.test(phone)) {
                showDialog("手机号格式错误！");
                return false;
            }
            var idmad = $("#idmad").val();
            if (!validateIdCard(idmad)) {
                return false;
            }
           /* wx.uploadImage({
                localId: picture[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    var serverIdA = res.serverId; // 返回图片的服务器端ID
                    $("#mediaIdA").val(serverIdA);
                    wx.uploadImage({
                        localId: picture[1], // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            var serverIdB = res.serverId; // 返回图片的服务器端ID
                            $("#mediaIdB").val(serverIdB);
                            $("#signInForm").submit();
                        }, error: function () {
                            return false;
                        }
                    });
                }, error: function () {
                    return false;
                }
            });*/
            $("#signInForm").submit();
        }
        function validateIdCard(idCard) {
            //15位和18位身份证号码的正则表达式
            var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
            //如果通过该验证，说明身份证格式正确，但准确性还需计算
            if (regIdCard.test(idCard)) {
                if (idCard.length == 18) {
                    var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); //将前17位加权因子保存在数组里
                    var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
                    var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
                    for (var i = 0; i < 17; i++) {
                        idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
                    }
                    var idCardMod = idCardWiSum % 11;//计算出校验码所在数组的位置
                    var idCardLast = idCard.substring(17);//得到最后一位身份证号码
                    //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
                    if (idCardMod == 2) {
                        if (idCardLast == "X" || idCardLast == "x") {
                            return true;
                            //alert("恭喜通过验证啦！");
                        } else {
                            showDialog("身份证号码错误！");
                            return false;
                        }
                    } else {
                        //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
                        if (idCardLast == idCardY[idCardMod]) {
                            //alert("恭喜通过验证啦！");
                            return true;
                        } else {
                            showDialog("身份证号码错误！");
                            return false;
                        }
                    }
                }
            } else {
                showDialog("身份证格式不正确!");
                return false;
            }
        }
        function showDialog(tip) {
            $(".tips").text(tip);
            $(".quanbrenbao").show().find(".datayes").click(function () {
                $(this).parents(".quanbrenbao").hide()
            });
        }
    </script>
</head>
<body>
<form action="<%=basePath%>student/signIn" method="post" id="signInForm" accept-charset="utf-8" style="position: absolute;width: 100%">
    <input type="hidden" id="mediaIdA" name="certificatesA"/>
    <input type="hidden" id="mediaIdB" name="certificatesB"/>
    <div style="position: relative">
        <h2 class="header">网上报名 </h2>
        <a style="position: absolute;right: 0;top: 12px;width: 80px;color: white;padding: 5px;font-size: 17px"
           href="tel:66655980"><img
                style="width: 21px; height: 20px; display: inline-block;margin-right: 5px;margin-top: -1px;"
                src="<%=basePath%>images/servicePhone.png"/>客服</a>
    </div>
    <div><img src="<%=basePath%>images/register_icon.jpg" style="width: 100%"></div>
    <ul class="formzhgll form-input-mobile">
        <li><input type="text" class="text-input" placeholder="真实姓名" name="userName"
                   id="idname"></li>
        <li><span class="xiakea">性别</span><input type="radio" name="sex" value="1"> <label>男</label> <input type="Radio"
                                                                                                            name="sex"
                                                                                                            class="ml10"
                                                                                                            value="2">
            <label>女</label></li>
        <li><input type="text" class="text-input" placeholder="手机" required="required" name="telnum"
                   id="phone"></li>
        <li><input type="text" class="text-input" placeholder="身份证号码" required="required"
                   name="certificatesId" id="idmad"></li>
        <li><input type="text" class="text-input" placeholder="推荐人(非必填)"
                   name="recommend" id="recommend"></li>
        <li style="display: none"><h2 class="titlez">请上传身份证正反面</h2>
            <div class="picliem">
                <span><a href="javascript:void(0)" onclick="chooseImage('a')"><img
                        src="<%=basePath%>images/zhengmeng.png" alt=""
                        id="show-picture"></a></span>
                <span><a href="javascript:void(0)" onclick="chooseImage('b')"><img
                        src="<%=basePath%>images/fangmian.png" alt=""
                        id="show-picture2"></a></span>
            </div>
        </li>
        <li style="height: 40px"></li>
    </ul>
    <p class="btn" style="position: fixed;bottom: 1px;width: 100%;padding: 0;">
        <button type="button" onclick="subimt()">提交</button>
    </p>
    <%--<p class="red">我们注重信息保护，不授权不对外提供</p>--%>
    <p id="error"></p>
</form>
<div class="quanbrenbao">
    <div class="data_fon">
        <h2>提示</h2>
        <p class="tips" style="text-align: center; margin-top: 10px ;font-size: 16px;padding-top: 10px">请上传您的身份证照片</p>
        <p><span class="datayes">确定</span></p>
    </div>

</div>
</body>
</html>
